<div style="min-width:1000px;">
<nz-breadcrumb class="breadcrumb-pos">
  <i nz-icon type="link" theme="outline" style="color:#1890FF;padding-right:4px"></i>
  <nz-breadcrumb-item>
    首页
  </nz-breadcrumb-item>
</nz-breadcrumb>
<div class="index-div" #indexdiv>
  <div style="background: #f0f2f5;">
    <div nz-row [nzGutter]="8">
      <div nz-col [nzSpan]="4">
        <nz-card [nzTitle]="cardTitle1" [nzHoverable]="true">
          <div class="zgy-flex"><span>黑白打印量</span><span>{{Alldata.blackPrinterSum}}张</span></div>
          <nz-progress nzStrokeColor="#1890FF" [nzPercent]="Alldata.blackPrinterSum?((Alldata.blackPrinterSum/Alldata.totalPrinterSum)*100).toFixed(0):0"
            nzSize="small" nzStatus="active"></nz-progress>
          <p style="margin-bottom: 16px"></p>
          <div class="zgy-flex"><span>彩色打印量</span><span>{{Alldata.coloursPrinterSum}}张</span></div>
          <nz-progress nzStrokeColor="#FA5454" [nzPercent]="Alldata.coloursPrinterSum?((Alldata.coloursPrinterSum/Alldata.totalPrinterSum)*100).toFixed(0):0"
            nzSize="small" nzStatus="active"></nz-progress>
        </nz-card>
        <ng-template #cardTitle1>
          <p class="dataLable">打印总量</p>
          <p class="dataNum">{{Alldata.totalPrinterSum}}<span>张</span></p>
        </ng-template>
      </div>
      <div nz-col [nzSpan]="4">
        <nz-card [nzTitle]="cardTitle2" [nzHoverable]="true">
          <div class="zgy-flex"><span>故障量</span><span>{{Alldata.taskErrSum}}条</span></div>
          <nz-progress nzStrokeColor="#1890FF" [nzPercent]="Alldata.taskErrSum?((Alldata.taskErrSum/Alldata.taskSum)*100).toFixed(0):0"
            nzSize="small" nzStatus="active"></nz-progress>
          <p style="margin-bottom: 16px"></p>
          <div class="zgy-flex"><span>预警量</span><span>{{Alldata.taskWarningSum}}条</span></div>
          <nz-progress nzStrokeColor="#FA5454" [nzPercent]="Alldata.taskWarningSum?((Alldata.taskWarningSum/Alldata.taskSum)*100).toFixed(0):0"
            nzSize="small" nzStatus="active"></nz-progress>
        </nz-card>
        <ng-template #cardTitle2>
          <p class="dataLable">任务总量</p>
          <p class="dataNum">{{Alldata.taskSum}}<span>条</span></p>
        </ng-template>
      </div>
      <div nz-col [nzSpan]="4">
        <nz-card [nzTitle]="cardTitle3" [nzHoverable]="true">
          <div class="zgy-flex"><span>完成工单</span><span>{{Alldata.yesTaskOrderSum}}单</span></div>
          <nz-progress nzStrokeColor="#1890FF" [nzPercent]="Alldata.yesTaskOrderSum?((Alldata.yesTaskOrderSum/Alldata.taskOrderSum)*100).toFixed(0):0"
            nzSize="small" nzStatus="active"></nz-progress>
          <p style="margin-bottom: 16px"></p>
          <div class="zgy-flex"><span>待完成工单</span><span>{{Alldata.noTaskOrderSum}}单</span></div>
          <nz-progress nzStrokeColor="#FA5454" [nzPercent]="Alldata.noTaskOrderSum?((Alldata.noTaskOrderSum/Alldata.taskOrderSum)*100).toFixed(0):0"
            nzSize="small" nzStatus="active"></nz-progress>
        </nz-card>
        <ng-template #cardTitle3>
          <p class="dataLable">工单总量</p>
          <p class="dataNum">{{Alldata.taskOrderSum}}<span>单</span></p>
        </ng-template>
      </div>
      <div nz-col [nzSpan]="4">
          <nz-card [nzTitle]="cardTitle4" [nzHoverable]="true">
              <div class="zgy-flex"><span>已支付账单</span><span>{{Alldata.yesBillSum}}单</span></div>
              <nz-progress nzStrokeColor="#1890FF" [nzPercent]="Alldata.yesBillSum?((Alldata.yesBillSum/Alldata.billSum)*100).toFixed(0):0"
                nzSize="small" nzStatus="active"></nz-progress>
              <p style="margin-bottom: 16px"></p>
              <div class="zgy-flex"><span>未支付账单</span><span>{{Alldata.noBillSum}}单</span></div>
              <nz-progress nzStrokeColor="#FA5454" [nzPercent]="Alldata.noBillSum?((Alldata.noBillSum/Alldata.billSum)*100).toFixed(0):0"
                nzSize="small" nzStatus="active"></nz-progress>
            </nz-card>
            <ng-template #cardTitle4>
              <p class="dataLable">账单总量</p>
              <p class="dataNum">{{Alldata.billSum}}<span>单</span></p>
            </ng-template>
      </div>
      <div nz-col [nzSpan]="4">
        <nz-card [nzTitle]="cardTitle6" [nzHoverable]="true">
          <div class="zgy-flex"><span>签约租户</span><span>{{Alldata.yesUserSum}}位</span></div>
          <nz-progress nzStrokeColor="#1890FF" [nzPercent]="Alldata.yesUserSum?((Alldata.yesUserSum/Alldata.userSum)*100).toFixed(0):0"
            nzSize="small" nzStatus="active"></nz-progress>
          <p style="margin-bottom: 16px"></p>
          <div class="zgy-flex"><span>待签约租户</span><span>{{Alldata.noUserSum}}位</span></div>
          <nz-progress nzStrokeColor="#FA5454" [nzPercent]="Alldata.noUserSum?((Alldata.noUserSum/Alldata.userSum)*100).toFixed(0):0"
            nzSize="small" nzStatus="active"></nz-progress>
        </nz-card>
        <ng-template #cardTitle6>
          <p class="dataLable">租户总量</p>
          <p class="dataNum">{{Alldata.userSum}}<span>位</span></p>
        </ng-template>
      </div>
      <div nz-col [nzSpan]="4">
        <nz-card [nzTitle]="cardTitle7" [nzHoverable]="true">
          <div class="zgy-flex"><span>签约设备</span><span>{{Alldata.yesPrinterSum}}台</span></div>
          <nz-progress nzStrokeColor="#1890FF" [nzPercent]="Alldata.yesPrinterSum?((Alldata.yesPrinterSum/Alldata.printerSum)*100).toFixed(0):0"
            nzSize="small" nzStatus="active"></nz-progress>
          <p style="margin-bottom: 16px"></p>
          <div class="zgy-flex"><span>待签约设备</span><span>{{Alldata.noPrinterSum}}台</span></div>
          <nz-progress nzStrokeColor="#FA5454" [nzPercent]="Alldata.noPrinterSum?((Alldata.noPrinterSum/Alldata.printerSum)*100).toFixed(0):0"
            nzSize="small" nzStatus="active"></nz-progress>
        </nz-card>
        <ng-template #cardTitle7>
          <p class="dataLable">设备总量</p>
          <p class="dataNum">{{Alldata.printerSum}}<span>台</span></p>
        </ng-template>
      </div>
    </div>
  </div>

  <!-- 柱状图 -->
  <div class="bar-wrap">
    <nz-radio-group [(ngModel)]="datetype" [nzSize]="'large'" (ngModelChange)="getBardata(datetype)" style="float: right;">
      <label nz-radio-button nzValue="3"><span>日</span></label>
      <label nz-radio-button nzValue="2"><span>月</span></label>
      <label nz-radio-button nzValue="1"><span>年</span></label>
    </nz-radio-group>
    <nz-tabset>
      <nz-tab nzTitle="打印量">
        <div echarts [options]="chartOption_1" class="bar-chart"></div>
      </nz-tab>
      <nz-tab nzTitle="任务量">
        <div echarts [options]="chartOption_2" class="bar-chart"></div>
      </nz-tab>
      <nz-tab nzTitle="工单量">
        <div echarts [options]="chartOption_3" class="bar-chart"></div>
      </nz-tab>
      <nz-tab nzTitle="账单量">
        <div echarts [options]="chartOption_4" class="bar-chart"></div>
      </nz-tab>
      <nz-tab nzTitle="租户量">
        <div echarts [options]="chartOption_5" class="bar-chart"></div>
      </nz-tab>
      <nz-tab nzTitle="设备量">
        <div echarts [options]="chartOption_6" class="bar-chart"></div>
      </nz-tab>
    </nz-tabset>
  </div>
</div>
</div>